<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
// import Upload from './upload.vue'
const props = defineProps<{
  show: boolean
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const uploadRef = ref<typeof Upload>()
const detail = reactive({
  categoryId: '',
  img: '',
})
const classify = ref([])
const getClassify = () => {
  get({ url: '/server-resource/attach/category/list' }, ({ data }) => {
    classify.value = data
  })
}
getClassify()
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      uploadRef.value!.onUpload(() => {
        emit('confirm')
        emit('update:show', false)
        done(true)
      })
    } else done(false)
  })
}
const str = ref('')
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" title="上传图片" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-form-item label="上传至分组" field="categoryId" :rules="[{ required: true, message: '请选择上传至分组' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="detail.categoryId" :field-names="{ label: 'name', value: 'id' }" :options="classify" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="上传图片">
          <!-- <Upload :category-id="detail.categoryId" :list="detail.img" v-model:value="str" ref="uploadRef" /> -->
        </a-form-item>
      </a-form>
    </div>
  </CModal>
</template>
<style lang="less" scoped></style>
